import { Handle, Position, type NodeProps } from '@xyflow/react'

import { type PositionLoggerNode } from '../types'

export function PositionLoggerNode({ positionAbsoluteX, positionAbsoluteY, data }: NodeProps<PositionLoggerNode>) {
  const x = `${Math.round(positionAbsoluteX)}px`
  const y = `${Math.round(positionAbsoluteY)}px`

  return (
    // We add this class to use the same styles as React Flow's default nodes.
    <div className="react-flow__node-default" style={{ color: 'red' }}>
      {data.label && <div>{data.label}</div>}

      <div>
        {x} {y}
      </div>

      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </div>
  )
}
